<template>
	<nav-header title="搜索查询">
		<view class="flex items-center bg-white px-4 border-b-ee" style="height: 60px;z-index: 10072;">
			<view class="flex items-center justify-center mr-2" @click="searchRange.show = !searchRange.show">
				<text class="pr-2 text-black-33" v-text="searchRange.title"></text>
				<u-icon :name="searchRange.show? 'arrow-up-fill':'arrow-down-fill'" color="#bfbfbf" size="10"></u-icon>
			</view>
			<view class="flex-1">
				<u-input v-model="searchVal" :clearable="true" placeholder="搜索你想要查找的信息" placeholder-style="color:#cccccc;font-size:14px;"
					:custom-style="{backgroundColor: '#ffffff',paddingLeft: '12px',borderRadius: '36px'}"
					@clear="reloadData()" @confirm="reloadData()" />
			</view>
		</view>
		<my-page ref="mypage" v-model="dataList" :height="system.screenHeight - system.statusBarHeight - 104" :contentClass="['bg-white']" @load-data="loadData">
			<template slot="content">
				<view v-for="(item,index) in dataList" :key="index" class="mx-4 py-4 flex justify-between items-center" :class="{'border-b-ee': index != (dataList.length - 1)}"
					@click="goNav(item)">
					<text class="text-black-33 pr-2" v-text="item.title || item.name"></text>
					<u-icon name="arrow-right" color="#bfbfbf" size="16"></u-icon>
				</view>
			</template>
		</my-page>
		<u-toast ref="uToast"></u-toast>
		<u-popup :show="searchRange.show" mode="top" overlayOpacity="0" zIndex="10071" round="8" @close="searchRange.show = false"
			:safeAreaInsetBottom="false" :customStyle="{'margin-top': '145px', 'border-top': '1px solid #f0f0f0'}">
			<view v-for="(item,index) in searchRangeDataList" :key="item.code" class="flex justify-between items-center mx-4 py-3 text-sm z-10"
				:class="{'border-b-ee': index < (searchRangeDataList.length - 1), 'text-color-theme': item.code == searchRange.selectCode, 'text-black-33': item.code != searchRange.selectCode}"
				@click="onchangeChRang(item)">
				<text v-text="item.title"></text>
				<u-icon v-if="item.code == searchRange.selectCode" name="checkbox-mark" color="#2d58cb" size="18"></u-icon>
			</view>
		</u-popup>
	</nav-header>
</template>

<script>
	import {mapState} from 'vuex'
	import MyPage from '@/components/my_page.vue'
	import NavHeader from '@/components/nav_header.vue'
	import * as siteApi from '@/interface/junchuang/site.js'
	import * as storeApi from '@/interface/junchuang/store.js'
	import * as articleApi from '@/interface/junchuang/article.js'
	import * as activityApi from "@/interface/junchuang/activity.js"
	import * as placeApi from '@/interface/junchuang/place.js'
	import * as financeApi from '@/interface/junchuang/finance.js'
	import * as courseApi from '@/interface/junchuang/course.js'
	import * as unionApi from '@/interface/junchuang/union.js'
	import MescrollPageMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mixins/mescroll-page.js"
	export default {
		mixins: [MescrollPageMixin],
		components: {
			NavHeader,MyPage
		},
		data() {
			return {
				//home: 首页 employ：创业 train：培训
				type: '',
				searchVal: '',
        searchRangeDataList: [{title: '园区动态', code: 'park_dynamics_news' },{title: '活动咨询', code: 'policy_adv'},{title: '政策速递', code: 'policy_speed' }],
				searchRange: {
					title: '',
					show: false,
					selectCode: '',
          homeRange: [{title: '园区动态', code: 'park_dynamics_news' },{title: '活动咨询', code: 'policy_adv'},{title: '政策速递', code: 'policy_speed' }],
					employRange: [{title: '企业服务', code: 'qiye' },{title: '产业服务', code: 'chanye' },{title: '生活服务', code: 'shenghuo' },{title: '金融服务', code: 'jinrong' }],
				},
				dataList: [],
				data: {pageTotal: 0},
			}
		},
		computed: {
			...mapState({
				system: state => state.system
			})
		},
		onLoad(e) {
			this.type = e.type
			let dataList = this.type == 'home'? this.searchRange.homeRange:(this.type == 'employ'? this.searchRange.employRange:this.searchRange.employRange)
      this.searchRangeDataList = dataList
      Object.assign(this.searchRange, {
				title: this.searchRangeDataList[0].title,
				selectCode: this.searchRangeDataList[0].code
			})
		},
    onShow() {
      this.$util.openShare();
    },
    onReady(){

    },
		onPullDownRefresh () {
			this.reloadData()
			uni.stopPullDownRefresh()
		},
		methods: {
			loadData(page, success, error){
				const v = this;
				let httpRes
				Object.assign(v.data, page)
        console.log("v.searchRange.selectCode",v.searchRange.selectCode)
				switch (v.searchRange.selectCode) {
					case "policy_adv":
						Object.assign(v.data, {
							title: v.searchVal,
							type: v.searchRange.selectCode.replace("policy_adv", '')
						})
						httpRes = activityApi.getActivityPage(v.data)
						break;

					case "place":
						Object.assign(v.data, {
							name: v.searchVal
						})
						httpRes = placeApi.getPlacePageList(v.data)
						break;
					case "qiye":
					case "chanye":
					case "shenghuo":
					case "jinrong":
						Object.assign(v.data, {
							type: v.searchRange.selectCode,
							name: v.searchVal
						})
						httpRes = unionApi.getCompanyPageList(v.data)
						break;

					case "park_dynamics_news":
					case "policy_speed":
						Object.assign(v.data, {
							title: v.searchVal,
							code: v.searchRange.selectCode
						})
						httpRes = articleApi.getArticlePageList(v.data)
						break;
				}
				httpRes.then(res=>{
          v.searchRange.dataList = res.data.total || 0
					success(res)
				}).catch(error)
			},
			goNav (item) {
				const v = this
				let url
				switch (v.searchRange.selectCode) {
          case "policy_adv":
            url = '/pages_home/junchuang_detail?id='
            break;
					case "park_dynamics_news":
					case "policy_speed":
            if(item.type == '0'){
              url = '/pages/common/article_detail?code=' + v.searchRange.selectCode + '&id='
            }
            if(item.type == '1'){
              url = '/pages/common/article_official_detail?code=' + v.searchRange.selectCode + '&id='
            }
						break;
          case "qiye":
          case "chanye":
          case "shenghuo":
          case "jinrong":
            url = '/pages_home/lianmeng/company_detail?id='
            break;
				}
				if (url) this.$util.myNavigateTo(url + item.id)
			},
			reloadData () {
				this.data = {pageTotal: 0}
				this.$refs['mypage'].dataReload()
			},
      // 点击分类
      onchangeChRang (item) {
        const v = this
        v.searchRange.selectCode = item.code
        v.searchRange.title = item.title
        v.searchRange.show = false;
        v.reloadData();
      },
		}
	}
</script>

<style>
</style>
